.page[index] {
  a {
    color: #0767c7;
    transition: 0.5s ease;
    &:hover {
      color: #223253;
    }
  }
  .left {
    font-size: .9rem;
    > ul {
      padding: 0;
      > li {
        list-style: none;
      }
      li {
        color: #333;
        h2 {
          border: none;
          margin: 0;
        }
        .label {
          color: #999;
          margin-bottom: 15px;
          overflow: hidden;
          .label-card {
            float: left;
            margin-right: 15px;
            i {
              padding-right: 0;
              margin-right: 3px;
              color: #999;
            }
          }
          .categories {
            padding: 0;
          }
        }
        .excerpt {
          h2 {
            font-size: 24px;
          }
          h3 {
            font-size: 22px;
          }
          h4 {
            font-size: 20px;
          }
          .postImg {
            margin-bottom: 16px;
            min-height: 260px;
            border-radius: 5px;
            background-position: 50% 50%;
            background-size: cover;
            -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
            box-shadow: 0 1px 4px rgba(0,0,0,.04)
          }
          p {
            font-family: Merriweather-Light,
            -apple-system,
            Verdana,
            "PingFang SC",
            "Helvetica Neue",
            Arial,
            "Hiragino Sans GB",
            "Microsoft YaHei",
            "WenQuanYi Micro Hei",
            sans-serif
          }
        }
        .read-all {
          text-align: right;
          font-size: 14px;
          a {
            color: #778ab0;
            transition: 0.2s ease;
            &:hover {
              color: #5872a7;
            }
            i {
              padding-right: 3px;
            }
          }
        }
      }
    }
    .pagination {
      text-align: center;
      .previous,
      .next {
        font-size: 20px;
        padding: 0 5px;
      }
      .page_number {
        padding: 0 5px;
      }
      .disable {
        color: #cbcbcb;
      }
    }
  }
  .right {
    .wrap {
      .side {
        margin-bottom: 20px;
        padding-bottom: 0;
        .tags-cloud {
          font-family: Merriweather-Light,
          -apple-system,
          Verdana,
          "PingFang SC",
          "Helvetica Neue",
          Arial,
          "Hiragino Sans GB",
          "Microsoft YaHei",
          "WenQuanYi Micro Hei",
          sans-serif;
        }
        > div {
          font-family: Merriweather-Light,
          -apple-system,
          Verdana,
          "PingFang SC",
          "Helvetica Neue",
          Arial,
          "Hiragino Sans GB",
          "Microsoft YaHei",
          "WenQuanYi Micro Hei",
          sans-serif;
        }
        i {
          margin-right: 3px;
        }
        .content-ul[cate] {
          overflow: hidden;
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            font-size: 14px;
            a {
              display: block;
              width: 100%;
              padding: 2px 0;
              border-bottom: 1px solid #eee;
              &:hover {
                background-color: #dbdfee;
                .badge {
                  background-color: #dbdfee;
                  transform: scale(1.2) rotate(360deg);
                }
              }
              .name {
                padding-left: 15px;
              }
              .badge {
                display: block;

                // width: 20px;
                float: right;
                text-align: center;
                margin-right: 15px;
                margin-top: 3px;
                padding: 0 10px;
                font-size: 12px;
                color: #fff;
                background-color: #778ab0;
                border-radius: 50%;
                transition: 0.5s ease-in-out;
              }
            }
            &:last-of-type a {
              border: none;
            }
          }
        }
        .content-ul[recent] {
          padding-bottom: 16px;
          li {
            color: #aaa;
            font-size: 14px;
          }
        }
        .tags-cloud {
          font-weight: normal;
          a {
            padding: 0 3px;
            border-radius: 5px;
            &:hover {
              background-color: #f0e7ce;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 770px) {
  .page[index] {
    .left > ul li {
      h2 {
        font-size: 22px;
      }
      .excerpt {
        h2 {
          font-size: 20px;
        }
        h3 {
          font-size: 18px;
        }
        h4 {
          font-size: 16px;
        }
        li {
          margin: 0;
        }
        .postImg {
          min-height: 160px;
        }
      }
    }
  }
}
